

import "./index.scss"
import { useRef, useState, useEffect } from "react"
import { Progress } from 'antd';

//  class 组件实现简单的 503 

var timer = null
export default function BadService({ history }) {
    const bgstar = useRef()
    const [spanNum, setSpanNum] = useState([])
    let [percent, setPercent] = useState(0)

    const gotowhere = () => {
        history.push("/login")
    }
    useEffect(() => {
        spanInit();

        var timer = setInterval(() => {
            if (percent < 100) {
                setPercent(++percent)
            } else {
                clearInterval(timer)
                timer = null;
                setPercent(0)
                gotowhere()  // 自动跳转 
            }
        }, 10)

        return () => {
            // 离开组件
            clearInterval(timer)
            timer = null;
            setPercent(0)
        }
    }, [])

    // 离开的时候没有清除计数器 
    const spanInit = () => {
        var screenW = document.getElementById("bgstar").clientWidth
        var screenH = bgstar.current.clientHeight
        console.log(screenW, screenH)
        for (var i = 0; i < 550; i++) {
            // 随机位置
            var x = Math.floor(Math.random() * screenW)
            var y = Math.floor(Math.random() * screenH)
            // 随机大小
            var scaler = Math.random() * 1.5
            // 随机频率 
            var rate = Math.random() * 2.5
            // 随机颜色
            var r = Math.floor(Math.random() * (255 - 0))
            var g = Math.floor(Math.random() * (255 - 0))
            var b = Math.floor(Math.random() * (255 - 0))
            spanNum.push({
                x: x + 'px',
                y: y + 'px',
                rate: rate,
                scaler: scaler,
                rgb: `rgb(${r},${g},${b})`
            })
        }
        setSpanNum([...spanNum]);
    }
    return (
        <div className="errorpage" id="bgstar" ref={bgstar}   >
            <img src={require('../../assets/images/503.png').default} className="errorimg" alt="" />
            {
                spanNum.map((l, i) => (
                    <span key={i} className="span-dots" style={{
                        left: l.x,
                        top: l.y,
                        animationDelay: l.rate + "s",
                        background: l.rgb,
                        transform: `scale(${l.scaler})`
                    }}></span>
                ))
            }
            <div className="process">
                <Progress onClick={gotowhere} type="circle" percent={percent} width={60} strokeColor={{
                    '0%': '#108ee9',
                    '100%': '#87d068',
                }} />
            </div>
        </div>
    )
}